<template>
	<view>
		<barHeight></barHeight>
		<view class="top fbox fbox-acenter fbox-jcenter">
			<view class="left bg-white fbox fbox-acenter" @click="goToSet()">
				<text class="f24">{{ $t('user.set') }}</text>
				<image src="/static/user/my_setting_icon.png" mode="widthFix"></image>
				<!-- <span v-if='myList.uid'>{{myList.uid||0}}</span> -->
			</view>
			<view class="mid fbox fbox-column fbox-jcenter fbox-acenter">
				<image :src="myList.avatar" mode=""></image>
				<text class="name f36">{{myList.nickname||'暂无'}}</text>
				<text class="num f24">Facebook(127)</text>
				<text class="id f30">{{myList.muid||'暂无'}}</text>
			</view>
			<view class="right bg-white fbox fbox-acenter" @click="SignUp">
				<image src="/static/user/my_sign_icon.png" mode="widthFix"></image>
				<text class="f24">{{ $t('user.Daily') }}</text>
			</view>
		</view>
		<view class="si-list bg-white fbox fbox-acenter fbox-jaround">
			<view class="si-item fbox fbox-acenter fbox-column" v-for="(item,index) in myList.navList"
				@click="goToInfo(index)">
				<image :src="item.icon"></image>
				<view class="f26 color3 fbox fbox-column tc">
					<text>{{item.name}}</text>
					<!-- <text class="hong" v-if="myList.token&&index===0">{{(myList.token)}}</text>
					<text class="hong" v-if="myList.points&&index===2">{{(myList.points)}}</text> -->
				</view>
			</view>
		</view>

		<view class="icon-list bg-white">
			<view class="item fbox fbox-acenter fbox-jbetween" @click="gouserinfo('Post')">
				<view class="zuo fbox fbox-acenter">
					<image src="/static/user/my_icon1.png" mode="widthFix"></image>
					<text class="f32 color3">{{ $t('user.Post') }}</text>
				</view>
				<view class="">
					<image class="right-icon" src="/static/user/right.png" mode="widthFix"></image>
				</view>
			</view>
			<view class="item fbox fbox-acenter fbox-jbetween" @click="gouserinfo('Room')">
				<view class="zuo fbox fbox-acenter">
					<image src="/static/user/my_icon2.png" mode="widthFix"></image>
					<text class="f32 color3">{{ $t('user.Room') }}</text>
				</view>
				<view class="fbox fbox-acenter">
					<text class="dot fbox fbox-acenter fbox-jcenter"
						v-if="myList.mychatShow">{{myList.mychatShow}}</text>
					<image class="right-icon" src="/static/user/right.png" mode="widthFix"></image>
				</view>
			</view>
			<view class="item fbox fbox-acenter fbox-jbetween" @click="gouserinfo('myscName')">
				<view class="zuo fbox fbox-acenter">
					<image src="/static/user/my_icon3.png" mode="widthFix"></image>
					<text class="f32 color3">{{ $t('user.myscName') }}</text>
				</view>
				<view class="">
					<image class="right-icon" src="/static/user/right.png" mode="widthFix"></image>
				</view>
			</view>
			<view class="item fbox fbox-acenter fbox-jbetween" @click="gouserinfo('Showcase')">
				<view class="zuo fbox fbox-acenter">
					<image src="/static/user/my_icon4.png" mode="widthFix"></image>
					<text class="f32 color3">{{ $t('user.Showcase') }}</text>
				</view>
				<view class="">
					<image class="right-icon" src="/static/user/right.png" mode="widthFix"></image>
				</view>
			</view>
		</view>

		<view class="icon-list bg-white">
			<view class="item fbox fbox-acenter fbox-jbetween" @click="gouserinfo('e-Card')">
				<view class="zuo fbox fbox-acenter">
					<image src="/static/user/my_icon5.png" mode="widthFix"></image>
					<text class="f32 color3">{{ $t('user.e-Card') }}</text>
				</view>
				<view class="">
					<image class="right-icon" src="/static/user/right.png" mode="widthFix"></image>
				</view>
			</view>
			<view class="item fbox fbox-acenter fbox-jbetween" @click="gouserinfo('Collection')">
				<view class="zuo fbox fbox-acenter">
					<image src="/static/user/my_icon6.png" mode="widthFix"></image>
					<text class="f32 color3">{{ $t('user.Collection') }}</text>
				</view>
				<view class="">
					<image class="right-icon" src="/static/user/right.png" mode="widthFix"></image>
				</view>
			</view>
			<view class="item fbox fbox-acenter fbox-jbetween">
				<view class="zuo fbox fbox-acenter">
					<image src="/static/user/my_icon7.png" mode="widthFix"></image>
					<text class="f32 color3">{{ $t('user.Mobile') }}<text class="shenlan">+60</text></text>
				</view>
				<view class="mobile f30 color3" style="color: #999;">
					{{myList.mobile}}
				</view>
			</view>
		</view>
		<view class="icon-list bg-white">
			<view class="item fbox fbox-acenter fbox-jbetween" @click="gouserinfo('Centre')">
				<view class="zuo fbox fbox-acenter">
					<image src="/static/user/my_icon8.png" mode="widthFix"></image>
					<text class="f32 color3">{{ $t('user.Centre')}}</text>
				</view>
				<view class="">
					<image class="right-icon" src="/static/user/right.png" mode="widthFix"></image>
				</view>
			</view>
			<view class="item fbox fbox-acenter fbox-jbetween" @click="goLanguage">
				<view class="zuo fbox fbox-acenter">
					<image src="/static/user/my_icon9.png" mode="widthFix"></image>
					<text class="f32 color3">{{ $t('user.Language')}}</text>
				</view>
				<view class="">
					<image class="right-icon" src="/static/user/right.png" mode="widthFix"></image>
				</view>
			</view>
		</view>
		<u-picker :show="show" :closeOnClickOverlay="true" @confirm="confirm" @cancel="close" @close="close"
			:columns="columns"></u-picker>
		<orange-fullloading v-if="isshow" text="loding..."></orange-fullloading>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				myList: [],
				show: false,
				isshow: true,
				columns: [
					['中文', 'English']
				],
			}
		},
		onShow() {
			this.userinfo()
		},
		onPullDownRefresh() {
			this.userinfo()
		},
		methods: {
			confirm(e) {
				console.log(e.value)
				if (e.value[0] == '中文') {
					console.log('1')
					this._i18n.locale = 'zh';
					uni.setStorageSync('lang', 'zh');
					this.show = false

				} else {
					this._i18n.locale = 'en';
					uni.setStorageSync('lang', 'en');
					this.show = false
				}
				console.log(this._i18n.locale)
				this.Tabbar()
			},
			Tabbar() {
				uni.setTabBarItem({
					index: 0,
					text: this.$t('tabbar.home'),
				})
				uni.setTabBarItem({
					index: 1,
					text: this.$t('tabbar.NewsInfo'),
				})
				uni.setTabBarItem({
					index: 2,
					text: this.$t('tabbar.PostInfo'),
				})
				uni.setTabBarItem({
					index: 3,
					text: this.$t('tabbar.BizCircles'),
				})
				uni.setTabBarItem({
					index: 4,
					text: this.$t('tabbar.MyCentre'),
				})
			},
			close() {
				this.show = false
			},
			goLanguage() {
				this.show = true
			},
			userinfo() {
				const params = {
					map: 'applet_member_center_cfg'
				}
				this.$Request({
					method: 'GET',
					data: params
				}).then(res => {
					if (res.data.ec == 200) {
						this.isshow = false
						uni.stopPullDownRefresh()
						this.myList = res.data.data
					} else {
						this.isshow = false
						uni.stopPullDownRefresh()
					}
				})

			},
			gouserinfo(name) {
				console.log(name)
				if (name == 'Post') {
					uni.navigateTo({
						url: '/pages/user/Mypost/index'
					})
					return
				}
				if (name == 'myscName') {
					uni.navigateTo({
						url: '/pages/user/myscName/index'
					})
					return
				}
				if (name == 'Showcase') {
					uni.navigateTo({
						url: '/pages/user/Showcase/index'
					})
					return
				}
				if (name == 'Room') {
					uni.navigateTo({
						url: '/pages/user/cartlist/index'
					})
					return
				}
				if (name == 'Centre') {
					uni.navigateTo({
						url: '/pages/user/cart/index'
					})
					return
				}
				if (name == "e-Card") {
					this.goToCard()
					return
				}
				if(name == 'Collection'){
					uni.navigateTo({
						url: '/pages/user/card/list'
					})
					return
				}
				uni.showToast({
					title: '暂未开放',
					icon: 'none'
				})
			},
			goToCard() {
				const params = {
					map: 'applet_business_card_detail'
				}
				this.$Request({
					method: 'GET',
					data: params
				}).then(res => {
					if (res.data.ec == 200) {
						if (res.data?.id) {
							uni.navigateTo({
								url: '/pages/user/card/index'
							})
							
						} else {
							uni.navigateTo({
								url: '/pages/user/card/details/index'
							})
						}
					} else {
						
					}
				})
			},
			goToSet() {
				uni.navigateTo({
					url: '/pages/user/Myset/index'
				})
			},
			goToInfo(index) {
				let url = ''
				if (index == 0) {
					url = "applet_currency_app_guide"
				}
				if (index == 1) {
					url = "applet_currency_app_guide"
				}
				if (index == 2) {
					url = "applet_agreement_my_points"
				}
				if (index == 3) {
					return
				}
				uni.navigateTo({
					url: "/pages/user/Richtext/index?url=" + url
				})

			},
			SignUp() {
				uni.showLoading({
					mask: true
				})
				const params = {
					map: 'applet_community_attendance'
				}
				this.$Request({
					method: 'GET',
					data: params
				}).then(res => {
					if (res.data.ec == 200) {
						uni.hideLoading()
						uni.showToast({
							title: res.data.data.msg,
							icon: 'none'
						})
					} else {
						uni.hideLoading()
						uni.showToast({
							title: res.data.em,
							icon: 'none'
						})
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #f4f4f4;
	}

	.top {
		height: 380rpx;
		background: url(/static/user/my_bg.png);
		background-size: 100% 380rpx;
		background-repeat: no-repeat;
		position: relative;

		.left {
			position: absolute;
			left: 0;
			top: 100rpx;
			padding: 15rpx 20rpx;
			border-radius: 0 30rpx 30rpx 0;

			text {
				color: #3cc9fe;
			}

			image {
				width: 27rpx;
				margin-left: 10rpx;
			}
		}

		.mid {
			padding: 40rpx 0;

			image {
				width: 100rpx;
				height: 100rpx;
				border-radius: 50%;
				border: 6rpx solid #FFFFFF;
			}

			.name {
				color: #fefefe;
				margin-top: 10rpx;
			}

			.num {
				color: #ffffff;
				margin-top: 10rpx;
			}

			.id {
				position: absolute;
				width: 80%;
				bottom: 0;
				color: #fefefe;
				background-color: #257b9b;
				padding: 20rpx 30rpx;
				margin-top: 10rpx;
				text-align: center;
				border-top-left-radius: 10rpx;
				border-top-right-radius: 10rpx;
			}
		}

		.right {
			position: absolute;
			right: 0;
			top: 100rpx;
			padding: 15rpx 20rpx;
			border-radius: 30rpx 0 0 30rpx;

			text {
				color: #3cc9fe;
			}

			image {
				width: 27rpx;
				margin-right: 10rpx;
			}
		}
	}

	.si-list {
		margin: 30rpx 30rpx 0;
		padding: 40rpx 0;
		border-radius: 20rpx;

		.si-item {
			image {
				width: 96rpx;
				height: 96rpx;
				border-radius: 100rpx;
			}

			view {
				text {
					margin-top: 10rpx;
				}

				.hong {
					background-color: #fe6a07;
					padding: 0 10rpx;
					color: #FFFFFF;
					border-radius: 30rpx;
					width: 50%;
					text-align: center;
					margin: 4rpx auto 0;
					font-size: 24rpx;
				}

				.lan {
					background-color: #3cc9fe;
					padding: 0 10rpx;
					color: #FFFFFF;
					border-radius: 30rpx;
					width: 50%;
					text-align: center;
					margin: 4rpx auto 0;
					font-size: 24rpx;
				}
			}
		}
	}

	.icon-list {
		margin: 25rpx 30rpx 0;
		border-radius: 20rpx;

		.item {
			padding: 25rpx 30rpx;

			.zuo {
				image {
					width: 40rpx;
					margin-right: 10rpx;
				}

				text {}

				.shenlan {
					background-color: #2497ff;
					padding: 2rpx 14rpx;
					color: #FFFFFF;
					border-radius: 30rpx;
					margin-left: 10rpx;
					font-size: 24rpx;
				}
			}

			.dot {
				width: 36rpx;
				height: 36rpx;
				border-radius: 50%;
				background-color: #f8642e;
				display: block;
				color: #FFFFFF;
				margin-right: 20rpx;
				text-align: center;
				font-size: 30rpx;
			}

			.right-icon {
				width: 16rpx;
			}
		}
	}
</style>
